<script setup>
import { computed } from "vue";

const xData = [
  "2023/10/23",
  "2023/10/24",
  "2023/10/25",
  "2023/10/26",
  "2023/10/27",
  "2023/10/28",
  "2023/10/29",
  "2023/10/30",
  "2023/10/31",
  "2023/11/01",
  "2023/11/02",
  "2023/11/03",
  "2023/11/04",
  "2023/11/05",
  "2023/11/06",
  "2023/11/07",
  "2023/11/08",
  "2023/11/09",
  "2023/11/10",
  "2023/11/11",
  "2023/11/12",
  "2023/11/13",
  "2023/11/14",
  "2023/11/15",
  "2023/11/16",
  "2023/11/17",
  "2023/11/18",
  "2023/11/19",
  "2023/11/20",
  "2023/11/21",
];

const lineData = [
  {
    label: "发文",
    data: xData.map((item) => [item, Math.ceil(Math.random() * 100)]),
  },
  {
    label: "点赞",
    data: xData.map((item) => [item, Math.ceil(Math.random() * 100)]),
  },
  {
    label: "转发",
    data: xData.map((item) => [item, Math.ceil(Math.random() * 100)]),
  },
];

const option = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      backgroundColor: "#fff",
      extraCssText: "box-shadow: 1px 4px 21px 0px rgba(100, 101, 102, 0.22)",
      position: "top",
      textStyle: { fontSize: 12, color: "#606266", align: "left" },
      axisPointer: { type: "line", lineStyle: { type: "dashed" } },
    },
    grid: { top: "40px", left: 35, right: 35, bottom: 10, containLabel: true },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLine: { lineStyle: { color: "#ffffff", width: 0 } },
      axisLabel: { margin: 15, color: "#a5cde1" },
      axisTick: { show: false },
      data: xData,
    },
    yAxis: {
      type: "value",
      axisLine: { show: false },
      axisLabel: { margin: 30, color: "#a5cde1" },
      // splitLine: { show: true, lineStyle: { color: "#244850" } },
      axisTick: { show: false },
    },
    series: lineData.map((t) => ({
      name: t.label,
      type: "line",
      data: t.data,
      colorBy: "series",
      showSymbol: false,
      markPoint: {
        symbol: "circle",
        symbolSize: 10,
        itemStyle: { color: "black", borderWidth: 2, borderColor: "#6ae6ff" },
        data: t.data.map((item) => ({ coord: item })),
      },
    })),
    color: ["#6ae6ff", "#fcee58"],
    legend: {
      data: lineData.map((item) => item.label),
      orient: "horizontal",
      show: true,
      left: 0,
      top: 0,
      icon: "roundRect",
      itemGap: 10,
      itemWidth: 20,
      itemHeight: 3,
      textStyle: { color: "#8391a5", fontSize: 12 },
    },
  };
});
</script>

<template>
  <div class="chart">
    <nf-charts :options="option" />
  </div>
</template>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 300px;
}
</style>
